<template>
  <div>
  <el-form
    hide-required-asterisk
    class="form"
    :class="{isFolder}"
    size="small"
    ref="form"
    :model="form"
    label-width="77px">
    <el-form-item :label="$t('名称')" prop="name">
      <el-input
        class="full-width"
        v-model="form.name"
        @blur="handleNameChange"
        :disabled="form.refCount > 0"
        maxlength="99"></el-input>
    </el-form-item>
    <el-form-item :label="$t('目录')">
      <el-select-tree
        class="full-width"
        check-strictly
        v-model="form.folderId"
        :placeholder="$t('请选择')"
        :data="treeData"
        :disabled="form.refCount > 0"
        :props="{
          value: 'id',
          label: 'name',
          children: 'children'
        }">
      </el-select-tree>
    </el-form-item>
    <el-form-item v-if="!isFolder" :label="$t('起止日期')">
      <div class="flex full-width">
        <el-date-picker
          class="input-160"
          v-model="form.startDate"
          value-format="yyyy-MM-dd"
          type="date"
          :placeholder="$t('开始日期')">
        </el-date-picker>
        <span class="flex-1" style="text-align: center;">{{ $t('至') }}</span>
        <el-date-picker
          class="input-160"
          v-model="form.endDate"
          value-format="yyyy-MM-dd"
          type="date"
          :placeholder="$t('结束日期')"
          :picker-options="{
            disabledDate(time) {
              if (!form.startDate) return false
              return time.getTime() < new Date(form.startDate).getTime() - (3600000 * 24)
            }
          }">
        </el-date-picker>
      </div>
    </el-form-item>
    <div class="flex">
      <el-form-item :label="$t('状态')">
         <el-input style="width:160px;" :value="form | getAuditStateName" disabled maxlength="99"></el-input>
      </el-form-item>
      <el-form-item class="label-pl15" label-width="60px" :label="$t('类型')">
        <el-select disabled class="input-160" v-model="form.type" :placeholder="$t('请选择')">
          <el-option
            v-for="(op) in fileTypeOpts"
            :key="op.value"
            :label="op.label"
            :value="Number(op.value)"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <template v-if="!isFolder">
      <el-form-item :label="$t('标签')">
        <tag-setting-input
          class-name="full-width"
          :tag-id.sync="form.tagId"
          :inner-tags.sync="form.innerTags"
          />
      </el-form-item>
      <el-form-item :label="$t('描述')">
        <el-input class="full-width" v-model="form.comment" type="textarea"></el-input>
      </el-form-item>
      <template v-if="String(form.type) === FILETYPE.VIDEO || String(form.type) === FILETYPE.PICTURE">
        <el-form-item :label="$t('二维码地址')">
          <el-input class="full-width" v-model="form.qrCode" type="textarea" maxlength="1000"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handlePreviewEwm">{{ $t('预览') }}</el-button>
        </el-form-item>
      </template>
    </template>
   
  </el-form>
  <div :class="{'disabled-area': !isFolder}">
    <el-form hide-required-asterisk class="form" :style="{'margin-top': isFolder ? '0' : '20px'}" :class="{isFolder}" size="small" :model="form" label-width="77px">
       <slot></slot>
    </el-form>
  </div>
  </div>
</template>

<script>
import {fileTypeOpts, FILETYPE} from '../../const'
import { createNamespacedHelpers } from 'vuex'
const {mapGetters} = createNamespacedHelpers('media')
import { validURL } from '@/utils/validate'
import TagSettingInput from '../TagSettingInput'

export default {
  components: {
    TagSettingInput
  },
  props: {
    isFolder: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default() {
        return {
          parentMune: '',
          menuName: '',
          des: '',
          tag: '',
          startDate: '',
          endDate: ''
        }
      }
    }
  },
  data() {
    return {
      FILETYPE,
      fileSuffix:'',
      inputValue: '',
      value1: '',
      fileTypeOpts
    }
  },
  mounted(){
    this.$nextTick(function() {
      this.open(this.form.name)
    })
  },
  created() {
    this.$eventBus.$on('open', this.open)
  },
  beforeDestroy() {
    this.$eventBus.$off('open')
  },
  filters: {
    getAuditStateName(v) {
      let msg = ''
      if(v.auditState === 0) {
        // -1:待转码 -2:转码失败 -3:转码中
        switch(v.state) {
          case -1:
            msg = '待转码'
            break
          case -2:
            msg = '转码失败'
            break
          case -3:
            msg = '转码中'
            break
          default:
            msg = "不可用"
        }
        return msg
      } else {
        return v.auditState == '3' ? '可用' : '不可用'
      }
    }
  },
  methods: {
    open(name){
      var arr = name.split('.')
      this.fileSuffix = ''
      for(var i = 1;i<arr.length;i++)
      {
        this.fileSuffix += arr[i]+'.'
      }

      this.fileSuffix = this.fileSuffix.substr(0,this.fileSuffix.length-1)
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue && inputValue !== this.form.tag) {
        this.form.tag = inputValue
      }
      this.inputValue = '';
    },

    handleNameChange(){
      var arr = this.form.name.split('.')
      var fileSuffix = this.form.name.split('.')[arr.length-1]
      if(arr.length == 1)
      {
        this.form.name = arr[0]+'.'+this.fileSuffix
        return
      }
      if(this.fileSuffix != fileSuffix)
      {
        var name = this.changeStr(this.form.name,this.form.name.length-fileSuffix.length,this.fileSuffix)
        this.form.name = name
      }
    },
    changeStr(str,index,changeStr){
      return str.substr(0, index) + changeStr+ str.substr(index + changeStr.length);
    },
    handlePreviewEwm() {
      const formIndex = String(this.form.type)
      if(formIndex === FILETYPE.VIDEO || formIndex === FILETYPE.PICTURE) {
        if(!validURL(this.form.qrCode)) {
          this.$message.error("二维码地址不合法")
          return
        }
      }
      this.$eventBus.$emit('previewEwm')
    }
  },
  computed: {
    ...mapGetters(['menuTree', 'tagTreeWithInner']),
    treeData() {
      return this.menuTree(1)
    },
  }
}
</script>

<style lang="scss" scoped>
.form {
  margin: 20px 30px;
  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
  .label-pl15 {
    ::v-deep .el-form-item__label {
      padding-left: 15px;
    }
  }
}
.disabled-area {
  position: relative;
  pointer-events: none;
  background: #f9f9f9;
  overflow: hidden;
}
.full-width {
  width: 380px;
}
.input-140 {
  width: 140px;
}
.input-160 {
  width: 160px !important;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.isFolder {
  margin-bottom: 0;
}
</style>